<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Adafruit ESPTool</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script>
      // Redirect to HTTPS if HTTP is requested.
      if (
        window.location.hostname !== "localhost" &&
        window.location.protocol === "http:"
      ) {
        window.location.href = "https:" + window.location.href.substring(5);
      }
    </script>

    <!-- import the web page's stylesheets along with the themes -->
    <link rel="stylesheet" href="https://use.typekit.net/qtk5kiq.css" />
    <link rel="stylesheet" href="css/style.css" />
    <link
      rel="stylesheet"
      href="css/light.css"
      id="light"
      class="alternate"
      disabled
    />
    <link
      rel="stylesheet"
      href="css/dark.css"
      id="dark"
      class="alternate"
      disabled
    />

    <!-- import the webpage's javascript file -->
    <script module>
      window.esptoolPackage = import(
        // In development we import locally.
        window.location.hostname === "localhost"
          ? "/dist/web/index.js"
          : "https://cdn.jsdelivr.net/gh/adafruit/Adafruit_WebSerial_ESPTool@latest/dist/web/index.js"
      );
    </script>
    <script src="js/script.js" module defer></script>
  </head>
  <body>
    <header class="header">
      <div class="left">
        <img src="assets/adafruit-logo.svg" class="Adafruit-Logo">
      </div>
      <div class="right">
        <select id="baudRate"></select>
        <button id="butConnect" type="button">Connect</button>
      </div>
    </header>
    <main class="main">
      <div id="notSupported" class="notSupported">
        Sorry, <b>Web Serial</b> is not supported on this device, make sure
        you're running Chrome 89 or later.
      </div>
      <div class="subheader">
        <div class="title left">Adafruit ESPTool</div>
        <div class="right">
          <label for="darkmode"> Dark Mode </label>
          <div class="onoffswitch">
            <input
              type="checkbox"
              name="darkmode"
              class="onoffswitch-checkbox"
              id="darkmode"
            />
            <label class="onoffswitch-label" for="darkmode">
              <span class="onoffswitch-inner"></span>
              <span class="onoffswitch-switch"></span>
            </label>
          </div>
        </div>
      </div>
      <div id="app">
        <div id="commands">
          <div class="upload">
            <label
              >Offset: 0x
              <input class="offset" type="text" value="0" />
            </label>
            <label class="firmware">
              <input type="file" accept=".bin" />
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="20"
                height="17"
                viewbox="0 0 20 17"
              >
                <path
                  d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"
                />
              </svg>
              <span>Choose a file&hellip;</span>
            </label>
            <div class="progress-bar hidden"><div></div></div>
          </div>
          <div class="upload">
            <label
              >Offset: 0x
              <input class="offset" type="text" value="0" />
            </label>
            <label class="firmware">
              <input type="file" accept=".bin" />
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="20"
                height="17"
                viewbox="0 0 20 17"
              >
                <path
                  d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"
                />
              </svg>
              <span>Choose a file&hellip;</span>
            </label>
            <div class="progress-bar hidden"><div></div></div>
          </div>
          <div class="upload">
            <label
              >Offset: 0x
              <input class="offset" type="text" value="0" />
            </label>
            <label class="firmware">
              <input type="file" accept=".bin" />
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="20"
                height="17"
                viewbox="0 0 20 17"
              >
                <path
                  d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"
                />
              </svg>
              <span>Choose a file&hellip;</span>
            </label>
            <div class="progress-bar hidden"><div></div></div>
          </div>
          <div class="upload">
            <label
              >Offset: 0x
              <input class="offset" type="text" value="0" />
            </label>
            <label class="firmware">
              <input type="file" accept=".bin" />
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="20"
                height="17"
                viewbox="0 0 20 17"
              >
                <path
                  d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"
                />
              </svg>
              <span>Choose a file&hellip;</span>
            </label>
            <div class="progress-bar hidden"><div></div></div>
          </div>
          <div class="buttons">
            <button id="butErase" type="button" disabled="disabled">
              Erase
            </button>
            <button id="butProgram" type="button" disabled="disabled">
              Program
            </button>
          </div>
        </div>
        <div id="log"></div>
      </div>
    </main>
    <footer class="footer">
      <div class="justify controls">
        <div>
          <label for="autoscroll">Autoscroll </label>
          <div class="onoffswitch">
            <input
              type="checkbox"
              name="autoscroll"
              class="onoffswitch-checkbox"
              id="autoscroll"
            />
            <label class="onoffswitch-label" for="autoscroll">
              <span class="onoffswitch-inner"></span>
              <span class="onoffswitch-switch"></span>
            </label>
          </div>
        </div>
        <button id="butClear" type="button">Clear Text</button>
      </div>
      <div class="center">
        Written by <a href="https://github.com/makermelissa">Melissa LeBlanc-Williams</a> for Adafruit Industries.
      </div>
    </footer>
  </body>
</html>